<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/table.css">
    <script src="../static/js/jquery-3.6.0.min.js"></script>
</head>
<body background="../static/img/123.jpg">

<script type="text/javascript">
    function altRows(id){
        if(document.getElementsByTagName){

            var table = document.getElementById(id);
            var rows = table.getElementsByTagName("tr");

            for(i = 0; i < rows.length; i++){
                if(i % 2 == 0){
                    rows[i].className = "evenrowcolor";
                }else{
                    rows[i].className = "oddrowcolor";
                }
            }
        }
    }

    window.onload=function(){
        altRows('alternatecolor');
    }
</script>

<style type="text/css">

    /*.oddrowcolor{*/
    /*    !*background-color:#d4e3e5;*!*/
    /*}*/
    /*.evenrowcolor{*/
    /*    !*background-color:#c3dde0;*!*/
    /*}*/
</style>

<table class="altrowstable" id="alternatecolor" align="center">
    <tr>
        <th>2018 ARR Goal</th>
        <th>2017 ARR Actual</th>
        <th>18vs17 GAP</th>
        <th>Total Months of Revenue</th>
        <th>MRR</th>
    </tr>
    <tr>
        <td><input id="A2"></td>
        <td><input id="B2"></td>
        <td id="C2"></td>
        <td id="D2"></td>
        <td id="E2"></td>
    </tr>
</table>
<table class="altrowstable" id="alternatecolor2" align="center">
    <tr>
        <th>of Customer  Acquired at the month</th>
        <th>Month</th>
        <th>of months the customer will pay</th>
        <th>Months of revenue </th>
    </tr>
    <tr>
        <td id="C3"><input></td>
        <td>Jan</td>
        <td id="D3"><input></td>
        <td id="E3"></td>
    </tr>
    </tr>
    <tr>
        <td id="C4"><input></td>
        <td>Feb</td>
        <td id="D4"><input></td>
        <td id="E4"></td>
    </tr>
    <tr>
        <td id="C5"><input></td>
        <td>Mar</td>
        <td id="D5"><input></td>
        <td id="E5"></td>
    </tr>
    <tr>
        <td id="C6"><input></td>
        <td>Apr</td>
        <td id="D6"><input></td>
        <td id="E6"></td>
    </tr>
    <tr>
        <td id="C7"><input></td>
        <td>May</td>
        <td id="D7"><input></td>
        <td id="E7"></td>
    </tr>
    <tr>
        <td id="C8"><input></td>
        <td>Jun</td>
        <td id="D8"><input></td>
        <td id="E8"></td>
    </tr>
    <tr>
        <td id="C9"><input></td>
        <td>Jul</td>
        <td id="D9"><input></td>
        <td id="E9"></td>
    </tr>
    <tr>
        <td id="C10"><input></td>
        <td>Aug</td>
        <td id="D10"><input></td>
        <td id="E10"></td>
    </tr>
    <tr>
        <td id="C11"><input></td>
        <td>Sep</td>
        <td id="D11"><input></td>
        <td id="E11"></td>
    </tr>
    <tr>
        <td id="C12"><input></td>
        <td>Oct</td>
        <td id="D12"><input></td>
        <td id="E12"></td>
    </tr>
    <tr>
        <td id="C13"><input></td>
        <td>Nov</td>
        <td id="D13"><input></td>
        <td id="E13"></td>
    </tr>
    <tr>
        <td id="C14"><input></td>
        <td>Dec</td>
        <td id="D14"><input></td>
        <td id="E14"></td>
    </tr>
</table>
<input type="button" class="button" value="计算" onclick="calculate()" />
<script>
    function calculate(){
        A2 = $("#A2").val()
        B2 = $("#B2").val()
        console.log(A2-B2)
        $("#C2").html(A2-B2)

    }
</script>
</body>
</html>